<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="dialogTitles[titleIndex] || titleIndex" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSafeDeviceType, getSafeDeviceType, addSafeDeviceType, updateSafeDeviceType, delSafeDeviceType } from '@/api/fireSafetyEquipment/fireSafetyEquipmentType';
import { mapState } from "vuex";
export default {
  name: "DeviceTypesForm",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        safeDeviceTypeId: '',
        safeDeviceTypeKey: '',
        safeDeviceTypeName: '',
        remark: ""
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "安消设施类型字符串",
          prop: "safeDeviceTypeKey",
          span: 24,
          labelWidth: "150px",
          clearable: true
        },
        {
          label: "安消设施类型名称",
          prop: "safeDeviceTypeName",
          span: 24,
          labelWidth: "150px",
          clearable: true,
        },
        {
          label: "备注",
          prop: "remark",
          span: 24,
          labelWidth: "150px",
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        safeDeviceTypeKey: {
          required: true,
          message: "安消设施类型字符串不能为空",
          trigger: "blur",
        },
        safeDeviceTypeName: {
          required: true,
          message: "安消设施类型名称不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        this.formModel = JSON.parse(JSON.stringify(this.formData));
      },
    },
    titleIndex: {
      handler() {
        this.formItemConfig.map((item) => {
          if (item.prop == "safeDeviceTypeKey") {
            if (this.titleIndex === 0) {
              item.disabled = false;
            } else {
              item.disabled = true;
            }
          }
        });
      },
    },
  },
  created() {

  },
  mounted() { },
  methods: {
    getList() {
      this.$emit("getList");
    },
    cancel() {
      this.$emit("cancel");
      this.$refs["form"].toResetFields();
    },
    submitFrom() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.$utils.isNotEmpty(this.formModel.safeDeviceTypeId)) {
            updateSafeDeviceType(this.formModel).then((res) => {
              if (res && 200 === res.code) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          } else {
            addSafeDeviceType(this.formModel).then((res) => {
              if (res && 200 === res.code) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          }
        }
      });
    },
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
